<template>
	<view>
		<view style="padding: 8rpx 24rpx;">
			<g-title-wrap label="基础样式" label-width="350" >
				<template slot='header'>
					<g-switch v-model="visible"></g-switch>
					<!-- <g-button type="primary" @handleClick='visible=!visible' size="mini">打开</g-button> -->
				</template>
				<g-loading type="circle" :visible.sync='visible' style="margin: 4rpx;"></g-loading> 
				<g-loading type="blow" :visible.sync='visible'  style="margin: 4rpx;"></g-loading>
				<g-loading type="organ" :visible.sync='visible'  style="margin: 4rpx;"></g-loading>
				<g-loading type="cube" :visible.sync='visible'  style="margin: 4rpx;"></g-loading>
			</g-title-wrap>
			<g-title-wrap label="背景颜色(bgColr)" label-width="350" >
				<template slot='header'>
					<g-switch v-model="visible1"></g-switch>
					<!-- <g-button type="primary" @handleClick='visible=!visible' size="mini">打开</g-button> -->
				</template>
				<g-loading type="circle" :visible.sync='visible1' style="margin: 4rpx;" bgColr='#ffd2f0'></g-loading> 
			</g-title-wrap>
			<g-title-wrap label="插槽示例(slot-name:tips)" label-width="350" >
				<template slot='header'>
					<g-button type="primary" size="mini" @handleClick='testClick'>加载</g-button>
					<!-- <g-button type="primary" @handleClick='visible=!visible' size="mini">打开</g-button> -->
				</template>
				<g-loading type="circle" :visible.sync='visible2' style="margin: 4rpx;" :duraction="1500"> 
					<template slot='tips'>
						<view class="tipsClass">加载成功</view>
					</template>
				</g-loading> 
				<view v-show="!visible2">
					<view v-for="(item,index) in testData" :key='index'>{{`内容${item}`}}</view>
				</view>
			</g-title-wrap>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				visible:false,
				visible1:false,
				visible2:false,
				testData:[]
				//circle/blow/organ/cube
			};
		},
		methods:{
			testClick(){
				this.visible2 = true
				setTimeout(()=>{
					this.visible2 = false	
					this.testData = ['1','2','3','4']
				},2500)
			}
		}
	}
</script>

<style lang="scss">
.tipsClass{
		width: 100%;
		height: 100%;
		background: #0073ff;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
